<template>
  <c-form-template lable="审批" v-if="list && list.length > 0">
    <el-timeline :reverse="false">
      <el-timeline-item
        v-for="(item, index) in list"
        :key="index"
        :type="item.type"
      >
        <div>
          <span class="node">{{ item.node }} </span>
          <span class="time-create mr-lg ml-lg">{{
            dateYMDHMSFormat(item.timeCreate)
          }}</span>
          <span class="node-comments-reject" v-show="item.nodeStatus === 2"
            >驳回原因: {{ item.nodeComments }}
          </span>
        </div>

        <!-- <div class="mt-sm node-comments">
          <span v-show="item.userType === 0">经销商</span>
          <span v-show="item.userType === 1">平台</span>
          <span v-show="item.userType === 2">资方</span>
          <span v-show="item.userType === 3">供应商</span>
          <span>{{ item.userId }}</span>
        </div> -->
      </el-timeline-item>
    </el-timeline>
  </c-form-template>
</template>
<script>
export default {
  props: {
    id: {
      type: [String, Number],
      default: "",
    },
    // 0采购  1订单 2企业认证（用户管理）
    business: {
      type: [String, Number],
      default: "0",
    },
  },
  data() {
    return {
      list: [],
    };
  },
  watch: {
    id: {
      handler(newValue) {
        if (newValue) this.getList();
      },
      immediate: true,
    },
  },
  methods: {
    getList() {
      const url = "/flows/list";
      const params = {
        id: this.id,
        business: this.business,
      };
      this.$get({ url, params }).then((res) => {
        const type = {
          0: "info",
          1: "success",
          2: "danger",
        };
        this.list = res.map((x) => {
          x.type = type[x.nodeStatus * 1];
          return x;
        });
      });
    },
  },
};
</script>
<style scoped>
.node {
  font-size: 14px;
  font-weight: bold;
}
.time-create{
color: #909399;line-height: 1;
  font-size: 13px;
}
.node-comments-reject {
  color: red;
  line-height: 1;
  font-size: 13px;
}
</style>